iT邦幫忙

2023 iThome 鐵人賽

DAY 17
0
  • HTML 表單(Form)是網頁中用於收集使用者輸入資訊的一種標準方式。它允許使用者輸入文字、選擇選項、上傳檔案等,然後將這些資訊發送到伺服器以進行處理。以下是 HTML 表單的基本組成部分和一些常用的元素。
  • <form> 元素:HTML 表單始於 <form> 元素,它定義了一個表單,通常包圍了表單內的所有元素。<form> 元素有一個必需的屬性 action,用於指定表單資料提交後將資料發送到的伺服器端腳本的,且宣告這個表單的資料會被用 http post 的方法送到 "/process_form.php" 這隻遠端程式。。
<form action="process_form.php" method="post">
  <!-- 表單元素將在這裡添加 -->
</form>
  • form表單裡可以使用多種元素,這邊用input來做示範。
<input type="text" name="username" placeholder="請輸入使用者名稱">
<input type="password" name="password" placeholder="請輸入密碼">
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<input type="checkbox" name="subscribe" value="yes"> 訂閱
  • <textarea> 元素:<textarea> 元素用於創建多行文字輸入框,通常用於使用者輸入長文本或評論。
<textarea name="comments" rows="4" cols="50"></textarea>
  • <select> 元素:<select> 元素用於創建下拉選單,供使用者從多個選項中選擇一個或多個。
        <select name="country">
            <option value="usa">美國</option>
            <option value="canada">加拿大</option>
            <option value="uk">英國</option>
        </select>
  • 最後加上submit,以把資料送出,以下是全部的程式碼。
<body>
    <form action="process_form.php" method="post">
        <input type="text" name="username" placeholder="請輸入使用者名稱">
        <input type="password" name="password" placeholder="請輸入密碼">
        <input type="radio" name="gender" value="male"> 男性
        <input type="radio" name="gender" value="female"> 女性
        <input type="checkbox" name="subscribe" value="yes"> 訂閱
        <select name="country">
            <option value="usa">美國</option>
            <option value="canada">加拿大</option>
            <option value="uk">英國</option>
        </select>
        <p><input type="submit" value="送出資料"></p>
    </form>

</body>

上一篇
Day_16 Lambda基本使用方法
下一篇
Day_18 CDN_讓你的網頁變得更簡潔
系列文
三十天持續努力挑戰py30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言